<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>EasyInvoke控制台</title>
    <link th:href="@{/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
    <link th:href="@{/style.min.css}" rel="stylesheet">
</head>

<script th:src="@{/jquery.min.js}"></script>
<script th:src="@{/bootstrap.min.js}"></script>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <div>
                        <h2 class="col-sm-10">
                            <span th:text="${invokeBody.target}"></span>
                            :
                            <span class="text-navy" th:text="${invokeBody.method}"></span>
                        </h2>
                        <button class="btn  btn-w-m  btn-primary col-sm-2" type="button"
                                th:onclick="'javascript:invoke('+'\'' + ${invokeBody.target} + '\'' + ',' + '\'' + ${invokeBody.name} +'\'' +',' +'\'' + ${invokeBody.method} +'\''  +',' +  ${invokeBody.paramTypes} + ');'">
                            调用
                        </button>
                    </div>

                    <div class="ibox float-e-margins">
                        <div style="display: none;"><span id="domain" th:text="${domain}"></span></div>
                        <div th:if="${invokeBody.paramTypes} != null"
                             th:each="requestParam : ${invokeBody.paramTypes}">
                            <div class="search-result form-horizontal">
                                <label class="col-sm-6 control-label" th:text="${requestParam}"></label>

                                <div class="col-sm-6">
                                    <input type="text" class="form-control" name="requestParam">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript" th:inline="javascript">


    function invoke(target, name, method, paramTypes) {

        var domain = $('#domain').html();
        var requestParam = document.getElementsByName("requestParam");
        var paramValues = new Array()
        for (var i = 0, j = requestParam.length; i < j; i++) {
            console.log(requestParam[i].value);
            paramValues.push(requestParam[i].value)
        }
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];

        var body = {
            "target": target,
            "method": method,
            "paramTypes": paramTypes,
            "paramValues": paramValues
        };

        var data = JSON.stringify(body);
        $.ajax({
            type: "POST",
            dataType: "json",//通过GET方式上传请求
            contentType: "application/json",//上传内容格式为json结构
            data: data,                                 //上传的参数
            async: false,
            url: basePath + "" + domain + "/easy-invoke/invoke",     //请求的url。与后端@Request Mapping注解中的值一致。
            success: function (data) {          //请求成功的回调函数
                alert(JSON.stringify(data));
            },
            error: function (e) {           //请求失败的回调函数
                console.log(e);
            }
        });
    };
</script>

</html>
